<template>
  <div class="emission-lab-content">
    <EmissionItem
      v-for="item in itemList"
      :key="item.name"
      :left="item.left"
      :top="item.top"
      :name="item.name"
      @move="move"/>
  </div>
</template>

<script>
import EmissionItem from "./EmissionItem"

export default {
  components: {
    EmissionItem,
  },
  data() {
    return {
      itemList: [
        {
          top: 0,
          left: 0,
          name: "铁矿石1"
        },
        {
          top: 0,
          left: 100,
          name: "铁矿石2"
        },
        {
          top: 0,
          left: 200,
          name: "铁矿石3"
        },
        {
          top: 0,
          left: 300,
          name: "铁矿石4"
        },
        {
          top: 0,
          left: 400,
          name: "铁矿石5"
        },
      ],
      valueLeft: 200
    }
  },
  methods: {
    move(position, name) {
      this.$emit("move", position, name)
    }
  }
}
</script>

<style>
.emission-lab-content {
  position: absolute;
  width: 600px;
  height: 400px;
  border: solid 1px #000;
}
</style>
